<template>
    <div class="header">
        <div class="left">
            <img src="../assets/logo.jpg" alt="">
            <div>
                <h1>学生系统管理</h1>
                <h1 id="h1">Student information management</h1>
            </div>
        </div>
        <div class="right">
            <router-link :to="{name:'onlineservice'}">在线客服</router-link>
            <router-link :to="{name:'commonproblem'}">常见问题</router-link>
            <router-link :to="{name:'securitycenter'}">安全中心</router-link>
            <span @click="self_info">{{info}}</span>
            <span @click="signOut" id="signOut">退出</span>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{}
        },
        computed:{
            info(){
                return this.$store.state.user_name ? '你好!' + this.$store.state.user_name : '登录';
            }
        },
        methods:{
            signOut(){
                localStorage.clear();
                sessionStorage.clear();
                window.open("about:blank","_self")
                window.close();
            },
            self_info(){
                if(this.info != '登录'){
                    this.$router.push('/selfinfo');
                }else{
                    this.$router.push('/login');
                }
            }
        }
    }
</script>

<style scoped>
.header{
    display: flex;
    justify-content: space-between;
}
.left{
    display:flex;
    justify-content: center;
    align-items: center;
}
img{
    width:60px;
    height:60px;
    cursor: pointer;
}
#h1{
    font-size: 10px;
}
.right{
    line-height: 60px;
}
a{
    font-size: 14px;
    color: white;
    font-weight: 700;
    padding-right: 30px;
}
span{
    font-size: 14px;
    color: white;
    font-weight: 700;
    padding-right: 30px;
    display:inline-block;
    cursor:pointer;
}
#signOut{
    cursor:pointer;
}
</style>